<template>
  <div class="newslist">
    <h2>新闻列表1</h2>
    <!-- <p>{{newslist[0].title}}</p> -->
    <div>
      <!-- 注意图片路径以波浪符开头 -->
      <img src="~static/1.jpg" width="333px">    
    </div>
    <div class="video">
      <nuxt-link to="/news/videoplay">小视频</nuxt-link>
    </div>
    <div class="item" v-for="item in newslist" :key="item.id">
      <!-- <nuxt-link :to="'/news/'+item.id"> -->
      <nuxt-link :to="{name:'news-id',params:{id:item.id,title:'路由传的参数'}}">
        <h3>{{item.title}}</h3>
        <h5>{{item.zhaiyao}}</h5>
      </nuxt-link>
    </div>
  </div>
</template>

<script>
import { async } from 'q';
import axios from 'axios';

export default {
  data(){
    return{
      newslist:[],
    }
  },
  async asyncData(cxt){
    let { data} = await axios.get('http://www.xyfight.com/api/getnewslist')
    return {newslist:data.message}
  },
  mounted(){
    this.$nextTick(() => {
      this.$nuxt.$loading.start()
      setTimeout(() => this.$nuxt.$loading.finish(), 2000)
    })
  }
}
</script>

<style lang="scss" scoped>
  .newslist{
    h2{color:red}
    .item{
      padding: 20px;
      border: 1px solid red;
      h3{color:green;}
    }
    .video{
      padding: 33px;
      font-size: 44px;
    }
  }
</style>
